/* @override
	http://localhost:29500/css/plush.css
*/

/*
Copyright 2012-2013 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
About the CSS

Plush requires a rather complex and tight layout: It is trying to pack a large
amount of information and controls in a small space. It differs from most web
page design in that it isn't primarily for reading prose or presenting a single
domain of structured information. The shell presents primarily mono-spaced text
information from a wide variety of commands all in a single, mixed use space.

While the HTML structure (see index.html) follows standard "semantic markup"
conventions, the CSS here must deviate from what is often considered standard
practice. In particular:

== Units ==
Most of the layout and styling is done in px units. In order for the tight
layout to work, especially with often hundreds of divs, sizing small elements
in em units has led to factional pixel placement, and uneven spacing.

== Sizing ==
The primary text size is set in pixels: 12px/14px. This allows consistent
sizing and placement of the monospaced text with repsect to other elements of
the shell interface.

We expect that users will use page zoom to make the user interface bigger or
smaller. Using the browser's font setting to change the size only makes sense
when the user is controlling the nominal size of written prose.
*/

/* @group Reset & Normalization */

* {
  margin: 0;
  padding: 0;
  border: 0;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

html {
  font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: 12px;
  line-height: 14px;
}

pre,
.mono-font {
  font-family:
    /* these fonts have very similar metrics and thus layout about the same */
    "Source Code Pro",  /* deemed best by mzero */
    "DejaVu Sans Mono", /* commonly available, and commonly used */
    Menlo,              /* std. on mac, and nearly same as DejaVu */
    monospace;          /* give up, use default */
  font-size: 12px;
  line-height: 14px;
}

a {
  color: #15c;
  text-decoration: none
}

a:visited {
  color: #7847b2
}

a:focus,a:hover,a:active {
  text-decoration: underline
}

button {
  font-size: 100%;
  line-height: 100%;
  vertical-align: middle;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* @end */

/* @group Layout */

html {
  height: 100%;
}

body {
  position: relative;
  height: 100%;
}

#header {
  height: 62px;
}

#status {
  position: absolute;
  top: 62px;
  bottom: 0;
  right: 0;
  padding-right: 12px;
  	/* Rather than set the right to 12px, this lets the scroll bar
  	   overlay just to the right of the status content area. */
  width: 240px;
  overflow: auto;
}

#screen {
  position: absolute;
  top: 74px;
  bottom: 12px;
  left: 12px;
  right: 252px;
}

.bezel {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

#scrollback,
#history {
  position: absolute;
  top: 0;
  bottom: 30px;
  left: 6px;
  right: 6px;
  overflow: auto;
}

#scrollback > *,
#history > * {
  padding-left: 12px;
}

#input-area {
  position: absolute;
  bottom: 0;
  height: 30px;
  left: 0;
  right: 0;
}


/* @end */

html {
  color: #444;
  background: #cacaca;
  background: -webkit-linear-gradient(top, #ccc 70%, #aaa);
  background:    -moz-linear-gradient(top, #ccc 70%, #aaa);
  background:         linear-gradient(top, #ccc 70%, #aaa);
}

/* @group Header */

#header {
  color: #91959c;
  background: #f5f5f5;
  box-shadow: inset 0 -2px 3px -1px rgba(80, 80, 80, 0.6);
}

#header .links {
  float: left;
  margin: 6px 0;
  padding: 3px 12px;
  border-right: 1px solid #d5d5d5;
}

#header .links a {
  display: block;
}

#header h1 {
  float: left;
  padding: 20px 12px 0 60px;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 300;
  white-space: nowrap;
  height: 60px;
  background: url(../img/chair-tiny.png) no-repeat 10px 8px;
}
#header .version {
  text-align: right;
  position: relative;
  top: 6px;
}

#header .version,
#header .links a {
  font-size: 10px;
  font-weight: normal;
  color: #aaa;
}

#header .version:hover,
#header .links a:hover {
  color: #333;
}

#header-info {
  text-align: right;
  padding: 6px;
}

#header-info > div {
  margin: 2px 0 12px;
}

#header a {
  text-decoration: none
}

#header-info .info {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1px 3px;
  color: #000;
}

/* @end */

/* @group Status */

#status > div {
  margin: 12px 0;
  padding: 8px;
  background: #f4f0e4;
  border-radius: 2px;
  box-shadow: 0 2px 5px -1px rgba(92, 95, 76, 0.6);
  font-size: 10px;
  line-height: 12px;
}

#status h1 {
  font-size: 100%;
  padding-bottom: 3px;
  border-bottom: solid 3px rgba(229,228,211,1);
  margin-bottom: 3px;
  word-break: break-all;
}

/* @end */

/* @group Screen */

#screen {
  border-radius: 8px;
  background-color: #fff;
}

#screen .bezel {
  border-radius: 8px;
  box-shadow: inset 0 5px 12px -1px rgba(92, 95, 76, 0.6);
}
/* @end */

/* @group jobs */

.job {
  border-left: 2px solid #fff;
  position: relative;
}
.job.topic {
  border-left-color: #ddd;
}
.job.topic.focus {
  border-left-color: #ff9134;
}
.job.running {
  background: url(ajax-loader.gif) no-repeat;
}

.job.complete {
  background: url(complete.png) no-repeat 4px 0;
}

.job.failed {
  background: url(failed.png) no-repeat 4px 0;
}

.job:focus {
  outline: none;
}

.job .command {
  white-space: pre-wrap;
}

.job > * {
  margin: 6px 6px 6px 18px;
}

.job .output-container {
  background: #eef1f7;
  border: 1px solid #dde0e7;
  -webkit-transition: all 0.125s ease-in-out;
     -moz-transition: all 0.125s ease-in-out;
          transition: all 0.125s ease-in-out;
}

.job.output-hide .output-container {
  border: none;
}
.job.output-hide .output {
  display: none;
  max-height: 0;
}
.job.output-tiny .output-container {
  max-height: 67px; /* = 4.75 * .mono-font's line-height */
  overflow: auto;
}
.job.output-page .output-container {
  max-height: 347px; /* = 24.75 * .mono-font's line-height */
  overflow: auto;
}
.job.output-full .output-container {
  max-height: 1000000em;
}

.job.max-deferred .view-hide,
.job.max-deferred .view-tiny,
.job.max-deferred .view-page,
.job.max-deferred .view-full,
.job.max-hide .view-tiny,
.job.max-hide .view-page,
.job.max-hide .view-full,
.view-deferred {
  display: none;
}

.job.max-tiny .view-page,
.job.max-tiny .view-full,
.job.max-page .view-full{
  visibility: hidden;
}

.job.max-deferred .view-deferred {
  display: inherit;
}

.job .output {
  position: relative;
  padding: 0.25em 0 0.25em 1em;
  border-right: none;
  white-space: pre-wrap;
  word-break: break-all;
}
.job .vtoutput {
  padding: 0 0 0 1em;
}
.job .stdout {
  color: #3f3f3f;
}

.job .stderr {
  color: #bd1c10;
}

.job .error {
  color: #bd1c10;
}

.job-controls {
  position: absolute;
  right: 0;
  top: -8px;
  z-index: 1;
}

.job:hover .command {
  color: #ff9134;
}

.view-controls,
.input-controls {
  background-color: #eef1f7;
  border: 1px solid #dde0e7;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 0 4px;
  display: inline-block;
  height: 23px;
  margin-left: 3px;
}

.job.max-deferred .view-controls,
.job.max-hide .view-controls,
.job.output-hide .view-controls {
  border-radius: 4px;
  border: 1px solid #eef1f7;
  height: inherit;
}
.job.max-deferred .view-controls,
.job.max-hide .view-controls {
  text-align: center;
  width: 30px;
}

ul.horiz-menu {
  list-style: none;
}

ul.horiz-menu li {
  display: inline-block;
}

.horiz-menu button {
  border: none;
  cursor: pointer;
  margin: 0 3px;
  color: #5b89e6;
  background: inherit;
}
.horiz-menu button:hover {
  color: #ff9134;
}

.view-controls button {
  width: 12px;
}
.input-controls button {
  width: 18px;
}

.output-container .cursor {
  float: left;
  border-left: 4px solid #ff9134;
  margin-left: -1em;
}

#history {
  background-color: #ffc;
  display: none;
  z-index: 2;
}

#history .item {
  border-left: 2px solid #fff;
  margin: 0.5em 0;
  display: none;
}
#history .item.match {
  display: inherit;
}

#history pre {
  white-space: pre-wrap;
  margin: 0.5em 1.5em 0;
}

#history .count {
  color: #777;
  font-style: italic;
  float: right;
}
#history .focus {
  background-color: #ffe;
}

#history .focus .command {
  font-weight: bold;
  padding-left: 0.5em;
}

/* @end */

/* @group Input */

#input-area {
  border-top: 2px solid #dedcbe;
}

#prompt,
#prompt-picker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  padding: 8px 0;
  text-align: center;
}

#prompt,
#prompt-picker {
  color: #045f9e;
}

#prompt.focus {
  color: #ff9134;
}

#prompt-picker {
  background: #ffc;
  padding: 6px 0 36px;
  display: none;
  border-radius: 0 0 0 8px;
}
#prompt-picker li {
  list-style: none;
}
#prompt-picker a {
  display: block;
  text-align: center;
  padding: 3px 0;
}
#prompt-picker a:hover {
  background: #cbcba3;
  text-decoration: none;
}

input#commandline {
  font-size: 100%;
  border: none;
  background: none;
  color: #035590;
  padding-left: 36px;
  padding-right: 12px;
  margin-top: 6px;
  width: 100%;
}

input#commandline:focus {
  outline: none;
}

#annotations {
  position: relative;
  border: none;
  color: #9d4e00;
  font-family: monospace;
  font-size: 100%;
  cursor: default;
  margin-left: 36px;
  top: -5px;
  left: 1px;
}

#annotations pre {
  height: .5em;
  display: inline-block;
}
#annotations .annotation {
  background-color: #c4d5ed;
  border-radius: 4px 4px;
  position: relative;
}
#annotations .message,
#annotations .completions {
  display: none;
  position: absolute;
  left: 0;
  bottom: 24px;
  border-radius: 4px;
  color: #fff;
  padding: 3px 0;
  font: 10px/13px "Lucida Grande", Lucida, Verdana, sans-serif;
  z-index: 1;
  background-color: #75a6ed;
  letter-spacing: 0;
}

#annotations .message,
#annotations .completions * {
  padding-left: 6px;
  padding-right: 6px;
}
#annotations .annotation:hover {
  background-color: #75a6ed;
}
#annotations .annotation:hover .message {
  display: block;
}
#annotations li {
  list-style-type: none;
}
#annotations li.focus {
  background-color: #c4d5ed;
  color: #000;
}

/* @end */

/* @group cwd history */

#cwd-history {
  display: inline-block;
  position: relative;
  margin-right: 6px;
}

#cwd-history .hidden {
  position: absolute;
  top: -6px;
  right: 0;
  z-index: 100;
  background-color: rgba(229,228,211,0.9);
  border: 1px solid #7f7e75;
  border-radius: 4px;
  text-align: left;
  padding: 6px 12px;
}

#cwd-history .hidden { display:  none; }
#cwd-history:hover .hidden { display: inherit; }

#cwd-history p {
  margin-bottom: 6px;
}

#cwd-history-list li {
  list-style-type: none;
}
#cwd-history-list li a {
  color: #000;
  white-space: pre;
}

#cwd span {
  padding: 0 6px 0 0;
}

#cwd span a {
  color: #000;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1px 3px;
}

#cwd span + span:after {
  content: "/";
  padding: 0 0 0 6px;
}

/* @end */

/* @group status dir */

#status-dir table {
  width: 100%;
  position: relative;
  z-index: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

#status-dir .file .name {
  text-decoration: underline;
  white-space: pre-wrap;
}

#status-dir .file .name.svntype-modified {
  background-color: red;
}

#status-dir .file .name.svntype-added {
  background-color: blue;
}

#status-dir .file .name.type-l {
  text-decoration: none;
  font-style: italic;
}

#status-dir .file .name {
  text-decoration: underline;
  white-space: pre-wrap;
}

#status-dir .file .name.type-- {
  text-decoration: none;
}

#status-dir .file .name.type-d {
  text-decoration: none;
  font-weight: bold;
}

#status-dir .file .name.type-l {
  text-decoration: none;
  font-style: italic;
}

#status-dir td {
  position: relative;
  padding: 1px;
}

#status-dir .hidden {
  position: absolute;
  top: 10px;
  background-color: rgba(254,238,124,0.85);
  width: 160px;
}

#status-dir td:hover {
  background-color: rgba(254,238,124,0.85);
  padding-left: 10px;
  cursor: none;
}
#status-dir td .hidden {
  left: -9999px;
  z-index: 1;
}
#status-dir td:hover .hidden {
  left: inherit;
  right: 0;
}

#status-dir dl {
  font-size: 90%;
  margin: 10px 0;
}
#status-dir dl dt {
  width: 70px;
  text-align: right;
  float: left;
}

#status-dir dl dd {
  margin-left: 80px;
}

/* @end */

/* @group status vars
*/

#status-env div p {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}

#status-env div dl {
  color: #333;
}

#status-env div dl dt {
  width: 8em;
  text-align: right;
  float: left;
  overflow: hidden;
}

#status-env div dl dd {
  margin-left: 9em;
  margin-bottom: 0.5em;
  word-break: break-all;
}

#status-env div dl .ro {
  font-style: italic;
}

/* @end */

/* @group help */

#help-body {
  background-color: #fff;
}
#help {
  position: absolute;
  right: 3em;
  left: 3em;
  top: 5em;
  background-color: #222;
  border-radius: 1.5em;
  color: #fff;
  opacity: 0.85;
  padding: 1em 2em;
  font-size: 90%;
  z-index: 20;
}
#help-body #help {
  top: 2em;
}
#help h1,
#help h2 {
  color: #fefa81;
}
#help-header {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #fff;
  margin-bottom: 1em;
  position: relative;
}
#help-body #help-header .controls {
  display: none;
}
#help-header .controls {
  position: absolute;
  right: 0;
  top: 0.25em;
}
#help-header a {
  color: #fff;
  margin-left: 2em;
}
#help h1 {
  font-size: 150%;
}
#help h2 {
  font-size: 100%;
  font-weight: bold;
}
#help table {
  width: 100%;
}
#help td {
  width: 50%;
  vertical-align: top;
}
#help dl dt {
  float: left;
  width: 11em;
  overflow: hidden;
  clear: both;
}
#help dl dt small {
  font-size: 80%;
}
#help dl dt i {
  font-weight: normal;
  color: #cacaca;
}
#help dl dd {
  margin-left: 10em;
}
#help dl dd i {
  font-weight: normal;
}
#help h2 + dl {
  margin-top: 0;
}
#help * + h2,
#help * + dl {
  margin-top: 2em;
}

/* @end */
